<template>
  <van-tabs v-model:active="active" @click-tab="onClickTab" sticky :offset-top="isShowNavBar ? 46 : 0">
    <van-tab title="正在热映">
      <slot name="playing"></slot>
    </van-tab>
    <van-tab title="即将上映">
      <slot name="upcoming"></slot>
    </van-tab>
  </van-tabs>
</template>
<script setup>

import { ref, onBeforeUnmount } from 'vue'
import { useStore } from '@/stores/index.js'

const store = useStore()
const active = ref(0)
defineProps({
  isShowNavBar: {
    type: Boolean,

  }
})


onBeforeUnmount(() => {
  store.setPageNum(1)
  store.setTabIndex(0) //  【非常重要】组件销毁时，重置 tab 索引为0 不然会导致页面一直加载正在热映 tab 页
})


// console.log("当前tab 索引", store.tabIndex);
const onClickTab = async ({ name }) => {
  const tabIndex = parseInt(name);
  // name 为 0 表示正在热映，为 1 表示即将上映
  store.setTabIndex(tabIndex) // 设置当前选中的 tab 索引
  store.setPageNum(1) // 设置当前页码为 1
  console.log("当前Tab索引：", store.tabIndex)
};


</script>
